<template>
  <div class="app-container">
    <div id="container" style="width: 100%; height: 680px;">
    </div>
    <label style="color:grey">点标记操作</label>
    <div class="input-item">
      <input id="addMarker" type="button" class="btn" @click="addMarker()" value="更新车辆位置">
    </div>
  </div>
</template>

<script setup>

import { onMounted, onUnmounted, ref, reactive } from "vue";
import { listInfo } from "@/api/vehicle/info";
import AMapLoader from "@amap/amap-jsapi-loader";

const  map = ref(undefined);
const markers = ref([]);
const newMap=ref(undefined)
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "「11fa46171b5a476ff40581ce7737421d」",
  };
  AMapLoader.load({
    key: "7f8922a33480e520cc450d7ffa3efb8e",
    version: "2.0",
    plugins: ["AMap.Scale", "AMap.PlaceSearch","AMap.AutoComplete","AMap.Marker"]
  }).then((AMap) => {
    map.value  = new AMap.Map("container", {
      viewMode: "2D",
      zoom: 11,
      center: [113.625423, 34.746652]
    });
    newMap.value=AMap;

    addMarker();
  })
  .catch((e) => {
    console.log(e);
  });
});

// 实例化点标记
function addMarker() {
   markers.value = [{
    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
    position: [113.671101,34.864003],
    content: '点标记内容'
  }, {
    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png',
    position: [113.664149,34.749587]
  }];
  // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
  markers.value.forEach(function(_marker) {
    let marker = new newMap.value.Marker({
      icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
      position: _marker.position,
      offset: new newMap.value.Pixel(-13, -30),
    });
    map.value.add(marker);
  });

  listInfo().then(res => {
    res.rows.forEach(item => {
      const position = [];
      if (item.point){
        item.point = item.point.split(",")
        item.point.forEach((item,index)=> {
          if (!isNaN(item) && !isNaN(parseFloat(item))) {
            position[index] = Number(item);
          }
        })
      }
      console.log(position);
      const marker = new newMap.value.Marker({
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: position
      });
      map.value.add(marker);
      // const marker_ = {
      //   icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
      //   position: position
      // };
      // markers.value.push(marker_)
    })
  })
}

function updateIcon() {

  if (!marker) {
    return;
  }
  marker.value.setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png')
}

function updateContent() {

  if (!marker) {
    return;
  }

  // 自定义点标记内容
  var markerContent = document.createElement("div");

  // 点标记中的图标
  var markerImg = document.createElement("img");
  markerImg.className = "markerlnglat";
  markerImg.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
  markerContent.appendChild(markerImg);

  // 点标记中的文本
  var markerSpan = document.createElement("span");
  markerSpan.className = 'marker';
  markerSpan.innerHTML = "Hi，我被更新啦！";
  markerContent.appendChild(markerSpan);

  marker.value.setContent(markerContent); //更新点标记内容
  marker.value.setPosition([116.391467, 39.927761]); //更新点标记位置
}

// 清除 marker
function clearMarker() {

  if (marker) {
    marker.value.setMap(null);
    marker.value = null;
  }
}

</script>

<style scoped>
#container {
  width: 80%;
  height: 680px;
}
 html,
 body,
 #container {
   height: 100%;
   width: 100%;
 }

.amap-icon img,
.amap-marker-content img {
  width: 25px;
  height: 34px;
}

.marker {
  position: absolute;
  top: -20px;
  right: -118px;
  color: #fff;
  padding: 4px 10px;
  box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
  white-space: nowrap;
  font-size: 12px;
  font-family: "";
  background-color: #25A5F7;
  border-radius: 3px;
}

.input-card {
  width: 18rem;
  z-index: 170;
}

.input-card .btn {
  margin-right: .8rem;
}

.input-card .btn:last-child {
  margin-right: 0;
}
.info{
  position: relative;
  margin:0;
  top: 0;
  right: 0;
  min-width: 0;
}
</style>
